/*
 * @Author: mingming.shan
 * @Effect: 拍照icon组[一行最多4个] 组件
 * @Date: 2018-06-25 15:52:34
 * @Last Modified by: mingming.shan
 * @Last Modified time: 2018-08-03 10:29:33
 */
<template>
  <div class="img-item-list flex-v flex-hs">
    <span>上传图片（最多四张）</span>
    <div class="flex-h flex-hs">
    <ImgItem v-for="img in imglist"
      :key="img.id"
      :img="img"
      @deleteImg="deleteImg"></ImgItem>
    <ImgItem v-if="showSeletedImg"
      @addImg="takePhoto"></ImgItem>
    <div v-for="n in addtionCount"
      :key="`addtionCount${n}`"
      class="addtion-item"></div>
    </div>
  </div>
</template>
<style>
/* 图片项的行容器 */
.img-item-list {
  width: 100%;
  height:240px;
  background: #fff;
  margin-top:32px;
}
.img-item-list>span:first-of-type{
  color:#999;
  font-size:14px;/*no*/
  line-height:20px;/*no*/
  margin:16px 32px;
}
/* 补全元素 */
.addtion-item {
  width: 165px;
  height: 165px;
}
</style>
<script>
import ImgItem from './img-item'
import ImgItemModel from '../models/imgItem.js'
import {browser} from 'vue-xiaobu-utils'
export default {
  props: {
    imglist: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  components: {
    ImgItem
  },
  mounted: function() {
    if (browser.versions.mobile) {
      // 判断是否是移动设备打开。browser代码在下面
      let ua = window.navigator.userAgent.toLowerCase() // 获取判断用的对象
      if (ua.match(/MicroMessenger/i) === 'micromessenger') {
        this.isWeiXing = true
      }
    }
  },
  computed: {
    // 添加元素数量
    addtionCount: function() {
      return 3 - this.imglist.length > 0 ? 3 - this.imglist.length : 0
    },
    // 显示选择照片按钮
    showSeletedImg: function() {
      return this.imglist.length < 4 || this.isWeiXing
    }
  },
  data() {
    return {
      isWeiXing: false
    }
  },
  methods: {
    // 添加对象到数组中
    addImgToList(urlArr) {
      let oldImgList = this.imglist
      // 添加数据
      for (const url of urlArr) {
        oldImgList.push(new ImgItemModel(url, url))
      }
      this.$emit('update:imglist', oldImgList)
    },
    // 删除照片
    deleteImg(img) {
      for (let index in this.imglist) {
        if (this.imglist[index].id === img.id) {
          this.imglist.splice(index, 1)
          this.$emit('update:imglist', this.imglist)
        }
      }
    },
    // 调起添加图片
    takePhoto() {
      let self = this
      self.$System.then(System => {
        if (System) {
          System.photoPicker(
            4 - self.imglist.length,
            undefined,
            undefined,
            options => {
              // 临时处理选择照片后，页面没有通知onresume问题，导致协议被拦截掉
              window.resume = true
              window.pause = false
              if (options && options !== '') {
                let urlArr = JSON.parse(options)
                console.log('选择照片:')
                console.log(JSON.parse(options))
                self.addImgToList(urlArr)
              }
            },
            err => {
              console.dir(err)
            }
          )
        }
      })
      // self.addImgToList([require('../assets/coffee.png')])
    }
  }
}
</script>
